<template>
	<div class="thanks">
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	</div>
</template>

<script>
	export default {
		name: 'thanks',
		components: {

		},
		data: () => ({

		}),
		methods: {

		}
	}
</script>

<style scoped="scoped">
	.thanks{
		width: 100vw;
		height: 80vh;
		position: relative;
	}
	ul{
		position: absolute;
		left: 4%;
	}
	li{
		list-style: none;
		width: 13vw;
		height: 80vh;
		background-color: #693D39;
		float: left;
		border-left: 1px solid #000000;
		box-shadow: -10px 0px 15px #151515;
		transition: 0.5s;
		background-repeat: no-repeat;
		background-size: 140% 100%;
	}
	ul>li:nth-child(1){
		background: red;
		border-left: none;
		box-shadow: none;
		background-image: url(../../../assets/static/thanks/1.jpg);
		background-repeat: no-repeat;
		background-size: 140% 100%;
	}
	ul>li:nth-child(2){
		background-image: url(../../../assets/static/thanks/2.jpg);
	}
	ul>li:nth-child(2){
		background-image: url(../../../assets/static/thanks/2.jpg);
	}
	ul>li:nth-child(3){
		background-image: url(../../../assets/static/thanks/3.jpg);
	}
	ul>li:nth-child(4){
		background-image: url(../../../assets/static/thanks/4.jpg);
	}
	ul>li:nth-child(5){
		background-image: url(../../../assets/static/thanks/5.jpg);
	}
	ul>li:nth-child(6){
		background-image: url(../../../assets/static/thanks/6.jpg);
	}
	ul>li:nth-child(7){
		background-image: url(../../../assets/static/thanks/7.jpg);
		background-repeat: no-repeat;
		background-size: 110% 100%;
	}
	li:hover{
		width: 15vw;
		
	}
</style>
